<template>
  <div class="home-dashboard">
    <el-row :gutter="24">
      <el-col :span="24">
        <el-card class="home-card">
          <div class="home-title">基础信息</div>
          <div class="home-info-list">
            <el-link type="primary" :underline="false" class="home-info-item">
              客户档案列表
            </el-link>
            <el-link type="primary" :underline="false" class="home-info-item">
              供应商档案列表
            </el-link>
            <el-link type="primary" :underline="false" class="home-info-item">
              仓库档案列表
            </el-link>
            <el-link type="primary" :underline="false" class="home-info-item">
              商品档案列表
            </el-link>
            <el-link type="primary" :underline="false" class="home-info-item">
              物料档案列表
            </el-link>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="24" style="margin-top: 24px;">
      <el-col :span="12">
        <el-card>
          <div class="home-title">采购相关提醒</div>
          <div class="home-remind">
            <el-link type="info" :underline="false">
              供应商待确认
            </el-link>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <div class="home-title">工单</div>
          <div class="home-tools">
            <el-link type="danger" :underline="false" class="home-tool-item">
              工单列表
            </el-link>
            <el-link type="primary" :underline="false" class="home-tool-item">
              系统操作说明书
            </el-link>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import * as echarts from "echarts";

const list = ref([
	"1、接口模块封装方案",
	"2、请求动作封装方案",
	"3、token 处理方案",
	"4、动态路由表处理方案",
	"5、动态菜单项处理方案",
	"6、动态面包屑处理方案",
	"7、历史打开页面TagsView 处理方案",
	"8、RBAC 的权限分控体系",
	"9、页面权限处理方案",
	"10、功能权限处理方案",
	"11、辅助库选择标准",
	"12、富文本编辑器处理方案",
	"13、keepAlive页面缓存处理方案",
	"14、多种企业级别组件的封装"

]);

onMounted(() => {
  // 只有当页面上有 id="main" 的元素时才初始化图表
  if (document.getElementById("main")) {
    initChart();
  }
});

const initChart = () => {
  const chartDom = document.getElementById("main");
  if (!chartDom) {
    // 防止 dom 不存在时报错
    console.warn("initChart: #main dom 不存在，跳过初始化");
    return;
  }
  const myChart = echarts.init(chartDom);
  const option = {
		tooltip: {
			trigger: "axis",
			axisPointer: {
				type: "cross",
				crossStyle: {
					color: "#999"
				}
			}
		},
		toolbox: {
			feature: {
				magicType: { show: true, type: ["line", "bar"] },
				restore: { show: true },
				saveAsImage: { show: true }
			}
		},
		legend: {
			data: ["Evaporation", "Precipitation", "Temperature"]
		},
		xAxis: [
			{
				type: "category",
				data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
				axisPointer: {
					type: "shadow"
				}
			}
		],
		yAxis: [
			{
				type: "value",
				name: "Precipitation",
				min: 0,
				max: 250,
				interval: 50,
				axisLabel: {
					formatter: "{value} ml"
				}
			},
			{
				type: "value",
				name: "Temperature",
				min: 0,
				max: 25,
				interval: 5,
				axisLabel: {
					formatter: "{value} °C"
				}
			}
		],
		series: [
			{
				name: "Evaporation",
				type: "bar",
				tooltip: {
					valueFormatter: function(value) {
						return value + " ml";
					}
				},
				data: [
					2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
				]
			},
			{
				name: "Precipitation",
				type: "bar",
				tooltip: {
					valueFormatter: function(value) {
						return value + " ml";
					}
				},
				data: [
					2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
				]
			},
			{
				name: "Temperature",
				type: "line",
				yAxisIndex: 1,
				tooltip: {
					valueFormatter: function(value) {
						return value + " °C";
					}
				},
				data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
			}
		]
	};
	option && myChart.setOption(option);
};

</script>

<style lang="scss" scoped>
@import '@/styles/mixin.scss';
@import '@/styles/variables.module.scss';

$success: #67c23a;
$warning: #e6a23c;
$danger: #f56c6c;
$primary: #409eff;
p {
  line-height: 30px;
  font-family: PingFangSC-Regular, "PingFang SC";
  font-weight: 400;
  font-size: 16px;
  color: #333;
}
.box-card {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-bottom: 13px;
  height: 10rem;

}
.c1 {
  box-shadow: 3px 3px 10px $success;
}
.c2 {
  box-shadow: 3px 3px 10px;
  box-shadow: 3px 3px 10px $primary;
}
.c3 {
  box-shadow: 3px 3px 10px $warning;
}
.c4 {
  box-shadow: 3px 3px 10px #909399;
}
.c5 {
  box-shadow: 3px 3px 10px $danger;
}
.fdr {
  display: flex;
  flex-direction: row;
}
.fdc {
  display: flex;
  flex-direction: column;
}
.t1 {
  width: 1rem;
  color: $success;
}
.t2 {
  width: 1rem;
  color: $primary;

}
.t3 {
  width: 1rem;
  color: $warning;

}
#main {
  width: 100%;
  min-height: 40rem;

}
.home-dashboard {
  padding: 24px;
  background: #f5f7fa;
  min-height: 100vh;
}
.home-card {
  margin-bottom: 0;
}
.home-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 18px;
}
.home-info-list {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}
.home-info-item {
  font-size: 16px;
  display: flex;
  align-items: center;
}
.home-remind {
  font-size: 16px;
  margin-top: 10px;
}
.home-tools {
  display: flex;
  gap: 24px;
  margin-top: 10px;
}
.home-tool-item {
  font-size: 16px;
  display: flex;
  align-items: center;
}
</style>